<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      padding: 10px;
    }

    .exterior {
      border: 2px solid #000000;
      width: 480px;
      height: 580px;
    }

    .interior {
      margin-top: 50px;
      width: 400px;
      height: 310px;
      border: seagreen 3px solid;
      margin: 30px auto;
      overflow: hidden;
    }

    h1 {
      text-align: center;
    }

    ul {
     /* margin-top: 50px;
      width: 400px;
      height: 200px;
      border: seagreen 3px solid;
      margin: 30px auto;*/
      list-style: none;
    }

    li {
      width: 360px;
      padding: 5px;
      background-color: rgba(223, 223, 223, 0.87);
      font-size: 14px;
      margin: 15px auto;
    }

    li a {
      float: right;
    }

    textarea {
      width: 400px;
      height: 80px;
      border: 3px solid seagreen;
      outline: none;
      resize: none;
      display: block;
      margin: 20px auto 5px;
    }

    .sub {
      display: block;
      background-color: seagreen;
      color: seashell ;
      width: 100px;
      height: 30px;
      margin: 10px auto;
      border: none;
    }

    button {
      border: none;
      background-color: inherit;
    }

    span {
      font-size: 16px;
      margin-left: 10px;
    }
    .remove {
      float: right;
    }

  </style>
</head>
<body>
<div class="exterior">
  <h1>留言板</h1>
  <textarea placeholder="请输入留言..."></textarea>
  <button class="sub">提交</button>
    <div class="interior">
      <span>留言展示区</span>
      <ul></ul>
    </div>
</div>
<script>
  // 获取元素
  var btn = document.querySelector('.sub');
  var text = document.querySelector('textarea');
  var ul = document.querySelector('ul');
  // 注册事件
  btn.onclick = function () {
    if (text.value == '') {
      alert('您没有输入内容');
      return false;
    } else {
      // 创建li元素节点
      var li = document.createElement('li');
      li.innerHTML = text.value;
      var button = document.createElement('button');
      button.className = 'remove';
      button.innerHTML = '删除';
      button.onclick = function () {
        ul.removeChild(this.parentNode);
      };
      li.appendChild(button);
      // 在ul元素中添加节点
      ul.insertBefore(li, ul.children[0]);
      // 将文本域中的内容清空
      text.value = '';
    }
  };
</script>
</body>
</html>